<template>
  <div class="wms-layout">
    <el-container>
      <el-aside width="280px" class="wms-aside">
        <!-- 系统Logo区域 -->
        <div class="system-header">
          <div class="logo-container">
            <div class="system-info">
              <h3 class="system-title">WMS系统—2210A—三组</h3>
              <span class="system-subtitle">仓库管理平台</span>
            </div>
          </div>
        </div>
        
        <el-menu 
          :default-active="activeMenu" 
          class="wms-menu" 
          background-color="transparent" 
          text-color="#b8c5d1"
          active-text-color="#64b5f6"
          unique-opened 
          router
        >
          <el-menu-item index="home" class="menu-item-custom">
            <el-icon class="menu-icon"><House /></el-icon>
            <span class="menu-text">首页-冯奥</span>
            <div class="menu-indicator"></div>
          </el-menu-item>
          
          <el-sub-menu index="dashboard" class="submenu-custom">
            <template #title>
              <el-icon class="menu-icon"><Folder /></el-icon>
              <span class="menu-text">经营看板</span>
            </template>
          <!-- <el-menu-item index="dashboard-inventory"><el-icon>
                <Watermelon />
              </el-icon>库存统计看板</el-menu-item>
            <el-menu-item index="dashboard-warehouse"><el-icon>
                <Pear />
              </el-icon>仓库经营看板</el-menu-item>
            <el-menu-item index="dashboard-purchase"><el-icon>
                <GobletSquareFull />
              </el-icon>采购库存看板</el-menu-item>
            <el-menu-item index="dashboard-production"><el-icon>
                <GobletFull />
              </el-icon>生产库存看板</el-menu-item>  -->
            <el-menu-item index="OutboundTransaction"><el-icon>
                <Sugar />
              </el-icon>出库量看板-刘益锋</el-menu-item>
          </el-sub-menu>
          
          <el-sub-menu index="base" class="submenu-custom">
            <template #title>
              <el-icon class="menu-icon"><Folder /></el-icon>
              <span class="menu-text">基础数据</span>
            </template>
            <!--<el-sub-menu index="base-product">
            <template #title>产品-基础数据</template>
             <el-menu-item index="base-product-info">
              <el-icon><Bowl /></el-icon>产品信息
            </el-menu-item>
            <el-menu-item index="base-product-category">
              <el-icon><MilkTea /></el-icon>产品分类
            </el-menu-item>
            <el-menu-item index="Productlook">
              <el-icon><Lollipop /></el-icon>产品信息查询-刘益锋
            </el-menu-item>
            </el-sub-menu> -->
          </el-sub-menu> 
           <el-sub-menu index="purchase">
            <template #title>
               <el-icon class="menu-icon"><Folder /></el-icon>
              <span class="menu-text">供应商管理</span>
            </template>
            <el-menu-item index="Goods">
                <el-icon><ShoppingCartFull /></el-icon>商品-刘益锋
              </el-menu-item>
              <el-menu-item index="Supperlist">
                <el-icon><Phone /></el-icon>供应商-刘益锋
              </el-menu-item>
              <el-menu-item index="PurchaseApply">
                <el-icon><DocumentCopy /></el-icon>采购订单-刘益锋
              </el-menu-item>
            <el-menu-item index="PurchaseOrderStat">
              <el-icon><Monitor /></el-icon>采购订单统计-刘益锋
            </el-menu-item>
          </el-sub-menu>  
          <el-sub-menu index="ware">
            <template #title>
               <el-icon class="menu-icon"><Folder /></el-icon>
              <span>仓库管理</span>
            </template>
            <el-menu-item index="WarehouseShow">
              <el-icon><SoldOut /></el-icon>仓库-康紫阳
            </el-menu-item>
            <el-menu-item index="WarehouseArea">
              <el-icon><Sell /></el-icon>库区-康紫阳
            </el-menu-item>
            <el-menu-item index="GoodsAllocation">
              <el-icon><Goods /></el-icon>货位-康紫阳
            </el-menu-item>
             <el-menu-item index="Inventory">
              <el-icon><ShoppingTrolley /></el-icon>库存-康紫阳
            </el-menu-item>
            <el-sub-menu index="record-management">
              <template #title><el-icon class="menu-icon"><Folder /></el-icon>记录管理</template>
                <el-menu-item index="StorageRecord">
                  <el-icon><Document /></el-icon>入库记录-康紫阳
                </el-menu-item>
                <el-menu-item index="DeliveryRecord">
                  <el-icon><Tickets /></el-icon>出库记录-康紫阳
                </el-menu-item>
                <el-menu-item index="AllocationRecord">
                  <el-icon><Notebook /></el-icon>调拨记录-冯奥
                </el-menu-item>
              </el-sub-menu>
             <el-sub-menu index="Inventory-management">
              <template #title><el-icon class="menu-icon"><Folder /></el-icon>盘点管理</template>
                <el-menu-item index="InventoryVerification">
                  <el-icon><EditPen /></el-icon>库存盘点-冯奥
                </el-menu-item>
              </el-sub-menu>
          </el-sub-menu>
        </el-menu>
        
        <!-- 用户信息区域 -->
        <div class="user-section">
          <div class="user-info">
            <el-icon class="user-avatar"><User /></el-icon>
            <div class="user-details">
              <span class="user-name">Admin</span> --
              <span class="user-role">超级管理员</span>
            </div>
          </div>
        </div>
      </el-aside>
      
      <el-main class="wms-main">
        <RouterView></RouterView>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { House, Folder, PictureFilled, User, OfficeBuilding, Document, DataAnalysis, InfoFilled } from '@element-plus/icons-vue'
import { use } from 'echarts/core'

import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, LegendComponent, TitleComponent, MarkPointComponent } from 'echarts/components'
use([
  CanvasRenderer,
  LineChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  MarkPointComponent
])

const activeMenu = ref('home')
</script>

<style scoped>
/* 基本布局 */
.wms-layout {
  height: 100vh;
}

.wms-aside {
  /* 与Demo页面保持一致的背景 */
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #1a1a2e 75%, #16213e 100%);
  background-image: radial-gradient(circle at 20% 80%, rgba(66, 165, 245, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(92, 107, 192, 0.1) 0%, transparent 50%);
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 系统头部样式 */
.system-header {
  padding: 20px;
  border-bottom: 1px solid rgba(100, 181, 246, 0.3);
  flex-shrink: 0;
}

.system-title {
  color: #000000; /* 黑色标题 */
  font-size: 18px;
  font-weight: 600;
}

.system-subtitle {
  color: #333333; /* 深色副标题 */
  font-size: 12px;
}

/* 菜单样式 */
.wms-menu {
  border: none;
  background: transparent;
  padding: 0 12px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 菜单项样式 - 深色文字 */
:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  color: #333333 !important;
  border-radius: 8px;
  margin: 4px 0;
}

:deep(.el-menu-item.is-active) {
  background: rgba(66, 165, 245, 0.4);
  color: #000000 !important;
  font-weight: 600;
}

.menu-icon {
  color: #1976d2;
}

/* 子菜单样式 - 白色背景 */
:deep(.el-sub-menu .el-menu) {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:deep(.el-sub-menu__icon-arrow) {
  color: #333333;
}

/* 用户信息区域 - 白色背景，黑色文字 */
.user-section {
  padding: 20px;
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.user-avatar {
  color: #1976d2;
  background: rgba(25, 118, 210, 0.1);
  padding: 8px;
  border-radius: 50%;
}

.user-name {
  color: #000000;
  font-weight: 600;
}

.user-role {
  color: #666666;
}

/* 滚动条样式 */
.wms-aside::-webkit-scrollbar,
.wms-menu::-webkit-scrollbar {
  width: 6px;
}

.wms-aside::-webkit-scrollbar-thumb,
.wms-menu::-webkit-scrollbar-thumb {
  background: rgba(66, 165, 245, 0.4);
  border-radius: 3px;
}

.wms-aside::-webkit-scrollbar-track,
.wms-menu::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.wms-aside::-webkit-scrollbar-thumb:hover,
.wms-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(66, 165, 245, 0.6);
}
</style>